<template>
  <div class="mblm-render">
    <div class="search-step" @click="showSearchHandle" v-if="!session.isNewSearchVersion && session.blmOpts && session.blmOpts.showStep">
      <img :class="{ 'arrow-up': showSearch }" class="arrow" :src="arrow_right" alt />
      思考步骤
    </div>
    <div v-for="item in answers"  class="search-step-text">
      <template v-if="item.componentName === 'Searching' && session.isNewSearchVersion">
        <blm-deep-searching
          :key="item.sectionId"
          class="ans-contain-margin"
          :content="item.content"
          :tabIndex="tabIndex"
          :thinkingToSwitc="thinkingToSwitc"
          :isSearching="item.isSearching"
          :session="session"></blm-deep-searching>
      </template>
      <blm-searching
        :key="item.sectionId"
        class="ans-contain-margin"
        v-else-if="item.componentName === 'Searching'"
        :content="item.content[0]"
        :isSearching="item.isSearching"
        v-show="showSearch"></blm-searching>
      <blm-richtext :richtextValue="item" v-else-if="item.componentName === 'RichText'"></blm-richtext>
      <div class="ans-contain-margin" :datakey="item.sectionId" v-else-if="item.componentName === 'Recommend'"></div>
      <div class="ans-contain-margin" :datakey="item.sectionId" v-else-if="item.componentName === 'Command'"></div>
      <div class="JgyComponent-contain ans-contain-margin" :datakey="item.sectionId" v-else-if="item.componentName === 'JgyComponent'">
        <BlmJgyrender :answer="item" />
      </div>
      <blm-nocontent v-else statName="yyzs" :answer="item" class="ans-contain-margin"></blm-nocontent>
    </div>
    <!-- 是否有用 -->
    <BlmSource :selfLinkTraceData="sourceAnswer" v-if="sourceAnswer"></BlmSource>
    <IsUse
      ref="isUseRef"
      v-if="answers.length != 0"
      :isShowUse="isShowUse"
      :isShowNoUse="isShowNoUse"
      :index="index"
      :isShowNoSc="isShowNoSc"
      :isShare="isShare"
      :isflagCollectIs="isflagCollectMb"
      :answer="answers"
      :question="question"
      @isUseFun="isUseFun"
      :isCollect="isCollect"
      :flagHistory="history"
      :itemDataIsUse="itemDataMblmRender"
      :isGenerate="isGenerate"></IsUse>
    <GuideQuestion :session="session" v-if="showGuide" @questiondetails="handleMessage" @click-sug-item="clickSugFun"></GuideQuestion>
  </div>
</template>
<script>
import BlmJgyrender from "./components/BlmJgyrender";
import BlmRichtext from "./components/BlmRichtext";
import BlmNocontent from "./components/BlmNocontent";
import BlmSearching from "./components/BlmSearching";
import BlmSource from "./components/BlmSource";
import GuideQuestion from "@/components/guide-question/GuideQuestion";
import BlmDeepSearching from "./components/BlmDeepSearching";
import IsUse from "@/components/isUse/IsUse.vue";
export default {
  name: "ansParseCustom",
  props: {
    answers: {
      type: Array,
      default: () => [],
    },
    session: Object,
    question: {
      type: String,
      default: "",
    },
    isGenerate: {
      type: [Boolean],
      default: true,
    },
    isflagCollectMb: {
      type: [Boolean],
      default: false,
    },
    
    tabIndex: {
      type: [String,Number],
      default: '0',
    },
    thinkingToSwitc: {
      type: [String,Number],
      default: '0',
    },
    index: {
      type: [String,Number],
      default: '0',
    },
    itemDataMblmRender: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isShowAll: false,
      history: true,
      isCollect: false,
      isShowUse: true,
      isShowNoUse: true,
      isShowNoSc: true,
      isShare: true,
      sessionArr: [],
      showSearch: true,
      arrow_right: require("@/assets/images/standard/arrow-down.png"),
    };
  },
  watch: {
    "session.blmOpts.showStep": function (n) {
      //如果可以显示思考步骤，那默认隐藏searching组件
      if (n) {
        this.showSearch = false;
      }
    },
    isGenerate: {
      immediate: true,
      handler(newVal) {
        this.isShowAll = newVal;
      },
    },
    answers: {
      immediate: true,
      handler(newVal) {
        this.history = newVal.history;
      },
      deep: true,
    },
  },
  computed: {
    sourceAnswer() {
      const richText = this.answers.filter((item) => item.componentName === "RichText" && item.traceData && item.traceData.length > 0);
      return richText[0] ? richText[0].traceData : null;
    },
    showGuide() {
      console.log("this.session-", this.session);
      return (
        this.session.response &&
        this.session.response.answer &&
        this.session.response.answer[0] &&
        this.session.response.answer[0].sugArr &&
        this.session.response.answer[0].sugArr[0]
      );
    },
  },
  components: {
    BlmJgyrender,
    BlmRichtext,
    BlmNocontent,
    BlmSearching,
    BlmSource,
    GuideQuestion,
    BlmDeepSearching,
    IsUse,
  },
  methods: {
    getCollect(index) {
      // this.$refs.isUseRef.isCollectFun(index);
    },
    textValueFun() {
      const richText = this.answers.filter((item) => item.componentName === "RichText" && item.traceData && item.traceData.length > 0);
      return richText[0] ? richText[0].traceData : null;
    },
    //收到子组件的消息传给父组件
    handleMessage(message) {
      this.$emit("questionschild", message);
    },
    showSearchHandle(e) {
      this.showSearch = !this.showSearch;
      e.stopPropagation();
    },
    clickSugFun(sugItem) {
      this.$emit("click-sug-item", sugItem);
    },
    isUseFun(clickType) {
      console.log(clickType);
      if(clickType=='copyText'){
        console.log(this.session);
        // let rawHtml = this.session.blmParseData[0].content;

        let rawHtml = '';

const blmParseData = this.session.blmParseData || [];

const firstArrayContent = blmParseData.find(item => Array.isArray(item.content));
const firstStringContent = blmParseData.find(item => typeof item.content === 'string');

if (firstStringContent) {
  rawHtml = firstStringContent.content;
} else if (firstArrayContent) {
  rawHtml = firstArrayContent.content.join('');
}



// 再传入解析函数
const plainText = this.htmlToPlainText(rawHtml);
      this.$emit("isUseFun", clickType,plainText);
        return
      }
      
      this.$emit("isUseFun", clickType, this.question);
    },
    htmlToPlainText(html) {
  const container = document.createElement('div');
  container.innerHTML = html;

  // 删除所有 <sup> 脚注标签
  container.querySelectorAll('sup').forEach(el => el.remove());

  // 替换 <hr> 为 "---"（不加换行）
  container.querySelectorAll('hr').forEach(hr => {
    const divider = document.createTextNode('---');
    hr.replaceWith(divider);
  });

  // 处理 <li> 标签（无空格前缀）
  container.querySelectorAll('li').forEach(el => {
    el.innerHTML = '-' + el.textContent.trim();
  });

  // 提取纯文本
  let text = container.textContent;

  // 去除所有空行和前后空格
  return text.replace(/\s+/g, '').trim();
}


  },
};
</script>
<style lang="less" scoped>
@import (once) "@/styles/variable.less";

.JgyComponent-contain {
  background-color: @white-color-1;
  padding: @padding10;
}

.ans-contain-margin {
}

.mblm-render {
  margin-bottom: 6px;
  text-align: left;
  white-space: normal;
  // background: #fff;
}

.arrow {
  width: 16px;
  vertical-align: text-bottom;
  margin-right: 2px;
}

.arrow-up {
  transform: rotatez(180deg);
}

.search-step {
  margin-bottom: 6px;
}

.blm-render-new-search {
  background-color: @white-color-1;
  padding-top: 10px;
}
</style>
<style lang="less">
@import (once) "@/styles/variable.less";

.rich-text-last-node::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: @black-color-2;
  animation: blink 900ms infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
